<template>
  <div class="app-container">
    <div class="filter-container" style=" display: flex;">
      <div style="width: 60%; padding-right: 1px;">
        <el-form ref="dataForm" :model="form" label-width="150px" :rules="rules" style="width:100%;margin-top:20px">
          <el-form-item label="档案模板名称：" prop="template_name">
            <el-col :span="12">
              <el-input v-model="form.template_name" placeholder="请输入模版名称呢过" style="width: 100%;" />
            </el-col>
          </el-form-item>

          <el-form-item label="优先级：" prop="priority">
            <el-col :span="12">
              <el-input-number v-model="form.priority" :min="1" :max="1000" placeholder="请输入优先级" />
            </el-col>
          </el-form-item>

          <el-form-item label="判定特征：" prop="identifying_features">
            <div>
              <div v-for="(item, index) in list" :key="item.key" class="row">
                <div v-if="index!==0" class="huo">
                  或
                </div>
                <el-col class="flex">
                  <div v-for="(valueItem, indexHuo) in item.value" :key="valueItem.key" class="flex">
                    <div v-if="indexHuo!==0" style="margin: auto 10px;">
                      且
                    </div>
                    <el-select v-model="valueItem.titleOrContent" style="width:100px">
                      <!-- <el-option label="标题" value="1" /> -->
                      <el-option label="内容" value="content" />
                      <el-option label="题名" value="tm" />

                      <el-option label="文件编号" value="wjbh" />
                      <el-option label="档号" value="dh" />
                      <el-option label="全宗号" value="gzh" />
                      <el-option label="类别号" value="lbh" />
                      <el-option label="案卷号" value="ajh" />
                      <el-option label="全文标识" value="gwbs" />
                      <el-option label="责任者" value="zrz" />
                      <el-option label="主题词" value="ztc" />
                    </el-select>
                    <el-input v-model="valueItem.value" style="width: 150px;margin-left: 10px; " />
                    <div>
                      <el-button type="danger" style="margin-left: 5px;" @click.prevent="remove(index,indexHuo)">
                        删除
                      </el-button>
                    </div>
                  </div>

                  <el-button type="primary" style="margin-left: 15px;margin-bottom: 15px;" @click.prevent="add(index)">
                    增加且
                  </el-button>
                </el-col>
                <div>
                  <el-button type="danger" @click.prevent="removeRow(index)">
                    删除或
                  </el-button>
                </div>
              </div>

              <el-button type="primary" style=" margin-top: 10px;" @click.prevent="addRow()">
                增加或
              </el-button>
            </div>
          </el-form-item>

          <el-form-item label="启用状态：" prop="status">
            <el-col :span="15">
              <el-switch v-model="form.status" />
            </el-col>
          </el-form-item>

          <el-form-item label="抽取方式：">
            <el-col :span="15">
              <el-radio-group v-model="form.mode">
                <el-radio label="1">
                  霍夫算法
                </el-radio>
                <el-radio label="2">
                  大模型抽取
                </el-radio>
                <el-radio label="3">
                  不抽取
                </el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-button type="info" @click="$router.push('/template/page')">
              返回
            </el-button>
            <el-button :disabled="isDisabled" type="primary" @click="submit">
              保存
            </el-button>
            <el-button type="warning" :loading="saveStatus" @click="saveNew">
              保存并寻找新档案
            </el-button>

            <el-input v-model="form.skip_template_notes" placeholder="请输入备注内容"
              style="width: 150px; margin-left: 50px;" />
            <el-button :disabled="isDisabled" type="primary" @click="beizhu">
              跳过并备注
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div style="padding-left: 2px; width: 40%;">
        <div style="display:flex;align-items: center;justify-content: center;flex-direction: column;">
          <div style="margin-top: 20px;  ">
            <span style="font-size: 12px;">文章案例ID</span> <el-input v-model="form.article_id"
              style="width: 150px; margin-left: 10px;" placeholder="" clearable />
            <el-button style="margin-left: 10px;" @click="fullTextPreview">
              全文预览
            </el-button>
            <el-button type="success" @click="validate">
              验证
            </el-button>
          </div>

          <div style="margin-top: 20px;">
            <span>{{ title }}</span>
          </div>

          <el-divider />
          <div>
            <div style="font-size: 12px;white-space:pre-wrap" v-html="htmlContent" />
          </div>

          <div v-if="batch_code!=''"
            style="display: flex; flex-direction: row-reverse;justify-content: flex-start;width: 100%; font-size: 12px;" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { api } from '@/api/template'
import { artApi } from '@/api/art'

export default {
  components: {},
  data() {
    return {
      saveStatus: false,
      batch_code: "",
      htmlContent: "",
      title: "",
      content: '',

      isDisabled: false,
      list: [
        {
          key: Date.now(),
          value: [
            { titleOrContent: "", value: "", key: Date.now(), },
          ]
        }
      ],
      form: {
        id: "",
        template_name: '',
        priority: '',
        status: true,
        mode: "2",
        identifying_features: [],
        article_id: "",
        skip_template_notes: ""
      },
      rules: {
        template_name: [
          { required: true, message: '请输入模板名字', trigger: 'blur' }
        ],
        priority: [
          { required: true, message: '请输入优先级', trigger: 'blur' }
        ],


      }

    }
  },
  mounted() {

    this.form.id = this.$route.query.id

    this.form.article_id = this.$route.query.article_id

    if (this.form.id != null) {
      this.getDetail()
    }

    if (this.form.article_id != null) {
      this.fullTextPreview()
    }



  },
  methods: {

    async validate() {


      const url = 'validateTemplate'

      this.form.identifying_features = this.list

      var res = await artApi(url, this.form)
      if (res.code == 200) {
        this.$message.success(res.message)
      }


    },


    async getDetail() {

      const url = 'getTemplateById'
      var res = await api(url, { id: this.form.id })
      if (res.code == 200) {
        this.form = res.data;

        if (res.data.status == 1) {
          this.form.status = true
        } else {
          this.form.status = false
        }
        this.list = res.data.identifying_features



      }

    },

    removeRow(index) {
      let mun = this.list.length

      if (mun <= 1) {
        this.$message.error('至少保留一个')
        return
      }

      this.list.splice(index, 1)

    },

    addRow() {


      let row = {
        key: Date.now(),
        value: [
          { titleOrContent: "", value: "" },
        ]
      };

      this.list.push(row)


    },

    async fullTextPreview() {
      const url = 'getArticleByid'
      var res = await artApi(url, { id: this.form.article_id })
      if (res.code == 200) {
        // this.htmlContent = res.data.content.replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>');
        this.htmlContent = res.data.content;
        this.title = res.data.title;
        this.batch_code = res.data.batch_code
      }

    },

    add(index) {

      this.list[index]['value'].push({
        value: '',
        titleOrContent: '',
        key: Date.now()
      })

    },

    remove(index, indexHuo) {

      console.log(index, indexHuo)

      let mun = this.list[index]['value'].length

      if (mun <= 1) {
        this.$message.error('至少保留一个')
        return
      }

      this.list[index]['value'].splice(indexHuo, 1)

    },

    saveNew() {

      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          // this.isDisabled = true
          let params = this.form

          console.log(this.form)

          if (this.form.status) {
            params.status = 1;
          } else {
            params.status = 0;
          }

          params.identifying_features = this.list;



          const url = 'saveOrUptTemplateFind'

          this.saveStatus = true

          var res = await api(url, params)
          this.saveStatus = false

          if (res.code == 200) {
            // this.$message.success('操作成功！')

            this.$message.success(res.message)

            this.form.article_id = res.data
            setTimeout(() => {
              window.location.href = '/template/templateSave?article_id=' + this.form.article_id;
            }, 1500);


          }

        }
      })


    },

    async beizhu() {

      const url = 'skipTemplateNotes'


      var res = await api(url, this.form)
      if (res.code == 200) {



        setTimeout(() => {
          this.$message.error(res.message)
        }, 1500)

        this.form.article_id = res.data
        console.log(res.data)
        window.location.href = '/template/save?article_id=' + res.data


      } else {
        this.$message.error(res.message)
      }

    },

    submit() {
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          // this.isDisabled = true
          let params = this.form

          console.log(this.form)

          if (this.form.status) {
            params.status = 1;
          } else {
            params.status = 0;
          }

          params.identifying_features = this.list;



          const url = 'saveOrUptTemplate'
          var res = await api(url, params)
          if (res.code == 200) {
            this.$message.success('操作成功！')
            this.$router.push('/template/templatepage')
          }
          this.isDisabled = false
        }
      })

    }



  }
}
</script>

<style scoped>
.huo {
  clear: both;
  margin-top: 15px;
  margin-bottom: 10px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.row {
  display: flex;
  flex-direction: column;
}

.el-divider--horizontal {
  width: 80%;
}

.filter-container {
  position: relative;
  align-items: baseline;
}

.filter-container::after {
  content: "";
  position: absolute;
  top: 10%; /* 上边距，可以根据需要调整 */
  bottom: 10%; /* 下边距，可以根据需要调整 */
  left: 58%; /* 调整为左边div的宽度百分比加上它的padding */
  width: 2px; /* 分隔线宽度 */
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 49%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  background-size: 2px 4px; /* 控制虚线的宽度和间隔 */
}
</style>
